<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="file" name="" id="" />
    <img src="" alt="" />

    <script>
      // 正常情况: 前端拿到图片对象,发请求到后端,上传到后端服务器上, 服务器返回一个地址=>图片
      // 前端本地预览: 前端可以不用发请求到后端,可以不需要地址, 也可以预览
      const inp = document.querySelector('input')
      const img = document.querySelector('img')

      inp.onchange = function(e) {
        const file = e.target.files[0]
        console.log(file);
        // file => 图片文件对象
        //  URL.createObjectURL(file) => 本地预览的url地址
        const imgUrl = URL.createObjectURL(file)
        console.log(imgUrl);
        img.src = imgUrl
      }
    </script>
  </body>
</html>
